PWA Night vol.9 ～PWAをビジネス面から捉えよう～

https://gyazo.com/0ab4a765ab48bb8cfdd1a3631efe13de

https://pwanight.connpass.com/event/147857/

PWAどうやって始める？ビジネスサイドはこうやって口説こう！

https://speakerdeck.com/paradisemaker/pwa-touyatuteshi-meru-hisinesusaitohakouyatutekou-shuo-kou

橋本将功

パラダイスウェア株式会社代表取締役

プロジェクトマネージャー

マンモスプロジェクト

やってるPWA案件

マンモスプロジェクト ver.2

レガシー業界の業務アプリケーション

電話とFAXの世界にモダンな業務アプリケーションを提供

リーンな新規事業で驚異的なコストパフォーマンス発揮

次年度黒字化できそう

レジャー業界のカスタマ向けサービス

位置情報を絡めたメディアとユーザ参加型サービス

５月中旬キックオフで今月リリース予定

提案協力や導入へのコンサルティング

PWAやってて思うこと

時代はかならず来る

HTML, ajax, SPAのWeb進化の正当な系譜

みなさんPWAやってますか？

良さがわかりづらい理由

技術的なアドバンテージがわかりにくい

口説き文句

安い

よくあるマルチデバイス対応のプロジェクト体制

チーム体制が膨大になる・管理工数やトラック係数が大きい

保守運用／改善でも大きな工数減

デバイス対応

OS対応

PWAも必要

アップデート対応

WWDCや新端末発売に振り回されない生活

サービス展開も安い

ストア手数料が不要

売上の30%カットされない

広告宣伝費が激安

アプリは1ダウンロードあたり400 - 1000円の広告宣伝費が必要

PWAはSEOが効く

Google AdwordsやFacebook広告が利用可能

ゾンビアプリ問題

リテンション施策を含めるとアプリはレッドオーシャン

一人の5つのアプリが利用時間の8割以上を占める

初期開発だけでなく成長に必要な投資も抑えられる

早い

早期にうごくものが作れる、触れる

プロトタイピングが素早い

大幅な工数・予算削減

おすすめ

Vue.js + Firebase

スクラム・カンバン

美味い

新規事業あるある

要件定義

仕様変更

システム連携コスト

新規事業に投入すると

要件を固められる

ブラッシュアップが頻繁に入る

プロジェクトの節目で投資判断ができる

リーンな投資で失敗を最小限に

ネイティブ化は成功してからでも可能

PWAは楽しい

開発しやすい

ビジネス、開発、ユーザーも楽しく

PWAのビジネスインパクト

https://moksahero.github.io/pwanight9/

Amano Takeshi

株式会社devMeTokyo

https://ikedayama.jp/

ITコンサル・PT CTO

世界の事例紹介

Pinterest PWAのパフォーマンス改善事例 - Takeshi Amano - Medium

モバイル→PWA

コンバージョンレート 1%

Reactで3ヶ月でローンチ

Pinterest LightがAndroid Storeで配信

Tinder

30MBから2.8MB

React.js + Redux

PCでもTinderできるように

Vue Storefront

https://www.vuestorefront.io/

PWAのe-コマースが作れる

OSSMagentoを始め10のECバックエンドと連携可能

インテグレーションも多数

Forbes

ロード時間短縮

セッションごとのページ65%

セッション時間が長くなった

直帰率減

AMPも導入

そのほか

pwastats.com

appsco.pe

PWA周りの話

クライアントワークが増えた

作るフェーズに

技術の選択肢も増えた

新規案件はPWA

事例

Rokes Commons Exchange

ビジネスモデル

暗号通貨取引所運営

新しい経済圏を構築

技術スタック

課題

スマホ向けのUI改善

外部サービスから連携

IR Japan

ビジネスモデル

IR情報を企業に提供、上場に関するコンサル

課題

スマホで情報提供したい

情報の一部だけを提供したい

技術スタック

Postgres, MySQL

Tomcat

Apache

Java sevlet

Azazel

ビジネスモデル

不動産のオーナーと賃貸者を直接つなぐ

課題

スマホで物件検索できるように

PCは不要

技術スタック

WinTicketにおけるPWA

https://speakerdeck.com/konojunya/winticketniokerupwa-at-pwa-night-vol-dot-9

Kono Junya

株式会社サイバーエージェント

2019年新卒

CATS

WintTicket

https://www.winticket.jp/

採用技術

Fastlyの活用

CDNとしてHTMLやアセットの配信を行う

ユーザ固有の情報はプレースホルダーを表示して取得したあと遅延読み込み

Fastly VCL

Cookieを消しつつ

ログイン非ログインをHeaderに詰める

Cache Hit率を上げるためのクエリパラメータ制御

IE11の非モダンブラウザへのビルドしたものの配信分岐

UserAgentをもとにiOSとAndroidを制御

Code Splitting & Dynamic Import

すべてのrouteでchunkに分割

サイズの大きいものは読み込みを遅延

エラーが起きたときにDynamic Import

テスト

TypeScriptを採用してテストコード削減

Unit Testは最小限にしてVisual Regression Testing

ロジックはUnit Testを行う

WinTicket × PWA

カテゴリはギャンブル

Play Storeでは国が限定されている

流れ

会員登録

入金（課金）

投票

ポイントチャージ（入金、払い戻し）

課金転換率

iOSとwebを比較するとiOSのほうが高い

iOSがPageView Per Sessionが高い

PWAは投票率とチャージ率、Session Per Userが高い

PWAと非PWAを比較するとPWAのほうが数字が高い

User Agentで判定して母数計算してる

どうPWAをインストールしてもらうか

a2hs（Add to home screen）

mini-info bar

a2hs dialog

omni box

これからのWinticket

SMS Receiver APIを利用したい

Verify phone numbers on the web with the SMS Receiver API | web.dev

GitHub.icon https://github.com/samuelgoto/sms-receiver

PWAでLTタイマーを作った

TAKA@はままつ

株式会社UNICCS

LTやるからLTタイマーを作ろう

Androidのイベントで講師を呼ぶからver2.0にアップデート

時間によってタイマーの表示するモード追加

Wifiなくてもネットワーク接続しなくてもいい

楽しいけどよくわかってない

Web技術だけでつくるQRコードリーダー

https://speakerdeck.com/kandai/webji-shu-dakedezuo-ruqrkodorida

菅家大地

株式会社TAM

フロントエンドエンジニア

QRコードリーダー

GitHub.icon https://github.com/KanDai/simple-qr-reader

カメラで撮ってcanvasを使って画像にする

mediaDevices.getUserMedia()

リアカメラで設定できる

iOSはSafari以外のブラウザで使用できない

jsQRを使用

GitHub.icon https://github.com/cozmo/jsQR